<template>
  <div>
    <!-- 1.图表容器  -->
    <div style="height:150px;" ref="box1"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request.js';
// 声明空数组接收后端获取的设备数组 
const empData = ref([]);
const box1 = ref(null);
// 声明饼图函数 
const loadPie = () => {
  const piePlot = new Pie(box1.value, {
    appendPadding: 10,
    data:empData.value,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    color:['#a0a4eb','#b773df'],
    label: {
      type: 'outer',
      offset: '-30%',
      // content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
      content:'{name}{value}个',
      style: {
        fontSize: 12,
        textAlign: 'center',
        fill:'white'
      },
    },
    // 图例 
    legend:{
      position:"top",
      itemName:{
        style:{
          fill:"white"
        }
      }
    },
    interactions: [{ type: 'element-active' }],
  });

  piePlot.render();
};
// 声明获取设备在线离线数量函数 
const getEmpData = async () => {
  // get(url,[可选参数{}])
  let response = await get('/dashboard/queryDeviceOnlineNumber');
  empData.value = response.data;
}
onMounted(async() => {
  await getEmpData();
  loadPie();
})

</script>
<style scoped lang="less"></style>